<template>
  <div class="cardData paymentAnalysis">
    <div class="breadcrumbNav">
      <!--<crumbList :navList="navList"></crumbList>-->
      <el-select v-model="searchData.cityCode" filterable placeholder="请选择城市" @change="topCalendarsChange">
        <el-option v-for="item in cityCodeList" :label="item.moduleName" :value="item.modulePath" :key="item.modulePath"></el-option>
      </el-select>
      <i class="fa fa-refresh" aria-hidden="true" @click="reload" title="刷新"></i>
    </div>
    <div class="card-data-title">
      <div class="dateType">
        <ul @click="selectDateTab">
          <li :data-index="0" :class="{active: currentNum === 0}">今日</li>
          <li :data-index="1" :class="{active: currentNum === 1}">昨日</li>
          <li :data-index="2" :class="{active: currentNum === 2}">七天前</li>
          <li :data-index="3" :class="{active: currentNum === 3}">上周</li>
          <li :data-index="4" :class="{active: currentNum === 4}">上月</li>
        </ul>
      </div>
      <ul class="total" v-show="currentNum === 0">
        <li v-for="(item, index) in topTotal" :key="index" class="card-data-title-item">
          <div class="left">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
            <div class="data">
              {{item.content}}
            </div>
          </div>
          <div class="right" :class="{hidePercent: !item.yesterdaypercent}">
            <div class="percent-box">
              <span class="percent" :class="{red: item.yesterdayUp, green: !item.yesterdayUp}">{{item.yesterdaypercent}}</span><span class="bottomFont">{{item.yesterdayBottomFont}}</span>
            </div>
            <div class="percent-box">
              <span class="percent" :class="{red: item.last7DaysUp, green: !item.last7DaysUp}">{{item.last7Dayspercent}}</span><span class="bottomFont">{{item.last7DaysBottomFont}}</span>
            </div>
          </div>
        </li>
      </ul>
      <ul class="total" v-show="currentNum === 1">
        <li v-for="(item, index) in topTotal" :key="index" class="card-data-title-item">
          <div class="left">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
            <div class="data">
              {{item.content}}
            </div>
          </div>
          <div class="right" :class="{hidePercent: !item.yesterdaypercent}">
            <div class="percent-box">
              <span class="percent">{{item.yesterdaypercent}}</span><span class="bottomFont">{{item.yesterdayBottomFont}}</span>
            </div>
            <div class="percent-box">
              <span class="percent">{{item.last7Dayspercent}}</span><span class="bottomFont">{{item.last7DaysBottomFont}}</span>
            </div>
          </div>
        </li>
      </ul>
      <ul class="total" v-show="currentNum === 2">
        <li v-for="(item, index) in topTotal" :key="index" class="card-data-title-item">
          <div class="left">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
            <div class="data">
              {{item.content}}
            </div>
          </div>
          <div class="right" :class="{hidePercent: !item.yesterdaypercent}">
            <div class="percent-box">
              <span class="percent">{{item.yesterdaypercent}}</span><span class="bottomFont">{{item.yesterdayBottomFont}}</span>
            </div>
            <div class="percent-box">
              <span class="percent">{{item.last7Dayspercent}}</span><span class="bottomFont">{{item.last7DaysBottomFont}}</span>
            </div>
          </div>
        </li>
      </ul>
      <ul class="total" v-show="currentNum === 3">
        <li v-for="(item, index) in topTotal" :key="index" class="card-data-title-item">
          <div class="left">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
            <div class="data">
              {{item.content}}
            </div>
          </div>
          <div class="right" :class="{hidePercent: !item.percent}">
            <div class="percent-box">
              <span class="percent" :class="{red: item.up, green: !item.up}">{{item.percent}}</span><span class="bottomFont">{{item.bottomFont}}</span>
            </div>
          </div>
        </li>
      </ul>
      <ul class="total" v-show="currentNum === 4">
        <li v-for="(item, index) in topTotal" :key="index" class="card-data-title-item">
          <div class="left">
            <i :class="item.titleIcon"></i><span class="headerFont">{{item.title}}</span>
            <div class="data">
              {{item.content}}
            </div>
          </div>
          <div class="right" :class="{hidePercent: !item.percent}">
            <div class="percent-box">
              <span class="percent" :class="{red: item.up, green: !item.up}">{{item.percent}}</span><span class="bottomFont">{{item.bottomFont}}</span>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="card-data-line">
      <div class="search">
        <div class="left">
          <el-radio-group v-model="searchData.searchType">
            <el-radio-button label="0">条件查询</el-radio-button>
            <el-radio-button label="1">对比分析</el-radio-button>
          </el-radio-group>
          <ul class="lineType">
            <li v-for="(item, index) in lineTypeOptions" :class="searchData.appKey === item.app_key ? 'is-active' : ''" @click="changeItem(item.app_key)">{{ item.name }}
            </li>
          </ul>
        </div>
        <div class="right">
          <el-radio-group v-model="searchData.calendars" v-if="searchData.searchType === '0'">
            <el-radio-button label="1">今日</el-radio-button>
            <el-radio-button label="0">昨日</el-radio-button>
            <el-radio-button label="2">上周</el-radio-button>
            <el-radio-button label="3">上月</el-radio-button>
          </el-radio-group>
          <el-date-picker  v-model="dateTimeScope"  type="daterange"  placeholder="请选择时间范围" align="right" @input="dateScopeChange" v-show="searchData.searchType === '0'"></el-date-picker>
          <el-button class="searchBtn" @click="getCardData" v-show="searchData.searchType === '0'">查询</el-button>
          <el-date-picker  v-model="searchData.compareDateA"  type="date"  placeholder="请选择对比日期A" align="right" @input="dateChange(searchData.compareDateA, 'A')" v-show="searchData.searchType === '1'"></el-date-picker>
          <el-date-picker  v-model="searchData.compareDateB"  type="date"  placeholder="请选择对比日期B" align="right" @input="dateChange(searchData.compareDateB, 'B')" v-show="searchData.searchType === '1'"></el-date-picker>
          <el-button class="searchBtn" @click="getCompareResult" v-show="searchData.searchType === '1'">对比</el-button>
        </div>
      </div>
      <div class="line" v-loading="paymentBarLoading" element-loading-text="加载中...">
        <div v-show="searchData.searchType === '0'" id="paymentBar" style="height: 600px"></div>
        <div v-show="searchData.searchType === '1'" id="paymentCompareBar" style="height: 600px"></div>
      </div>
    </div>
    <div class="card-data-table">
      <div class="export">
        <a href="javascript:void(0)" target="_blank"><el-button type="primary" class="exportBtn" @click="exportExcelHandler">导出</el-button></a>
      </div>
      <!--今日昨日-->
      <myTable :table="table" :tableData="tableData" v-show="searchData.startTime === '' && searchData.searchType === '0' && (searchData.calendars === '1' || searchData.calendars === '0')"></myTable>
      <!--上周-->
      <myTable :table="payWeekTable" :tableData="tableData" v-show="searchData.startTime === '' && searchData.searchType === '0' && searchData.calendars === '2'"></myTable>
      <!--上月-->
      <myTable :table="payMonthTable" :tableData="tableData" v-show="searchData.startTime === '' && searchData.searchType === '0' && searchData.calendars === '3'"></myTable>
      <!--自定义-->
      <myTable :table="payCustomTable" :tableData="tableData" v-show="searchData.startTime !== ''"></myTable>
      <!--对比分析-->
      <myTable :table="payCompareTable" :tableData="tableData" v-show="searchData.searchType === '1'"></myTable>
      <div class="block">
        <el-pagination layout="total, prev, pager, next, jumper"
                       @current-change="handleCurrentChange"
                       :current-page="page.pageNum"
                       :page-size="page.pageSize"
                       :total="page.total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapState, mapActions } from 'vuex'
  import crumbList from '../../common/crumbList.vue'
  import myTable from '../../common/myTable.vue'
  import setDate from '../../../../utils/setDate'
  import cardData from '../../../../utils/getCardTotal'
  import api from '../../../../api/index'
  import ajax from '../../../../utils/ajax'
  import {handleChartData, handleChartDataCompare} from './js/handleChartData'
  export default {
    components: {crumbList, myTable},
    data () {
      return {
        navList: [
          {name: '支付分析', path: ''}
        ],
        topTotal: [],
        currentNum: 0,
        searchData: {
          cityCode: '', // 城市选择
          calendarsTop: '0', // 顶部搜索
          appKey: '1', // 全部
          calendars: '1', // 0 昨日 1 今日 2 上周 3 上月
          startTime: '',
          endTime: '',
          compareDateA: '',
          compareDateB: '',
          searchType: '0'
        },
        dateTimeScope: '', // 时间范围
        lineTypeOptions: [], // 线路类型选项
        paymentBarLoading: false,
        monthTable: []
      }
    },
    computed: {
      ...mapState('moduleItem', [
        'cityCode',
        'cityCodeList',
        'table',
        'tableData',
        'tableDataTotal',
        'page',
        'payWeekTable',
        'payMonthTable',
        'payCustomTable',
        'payCompareTable'
      ])
    },
    mounted () {
      this.searchData.cityCode = this.cityCode
      this.getTopTotal({url: api.paymentData.total, params: {cityCode: this.searchData.cityCode, dateType: this.searchData.calendarsTop}})
      this.initChartTableData()
    },
    methods: {
      ...mapActions('moduleItem', [
        'setCityCode',
        'setPage',
        'setTableData',
        'setTableDataTotal',
        'setTable',
        'setPayWeekTable',
        'setPayMonthTable',
        'setPayCustomTable',
        'setPayCompareTable'
      ]),
      getTopTotal (obj) { // 顶部汇总
        let that = this
        ajax.get(obj.url, obj.params).then((res) => {
          let data = res.data
          that.topTotal = that.$formatNumber(data) // 数字加千分位
        })
      },
      dateScopeChange (val) {
        this.searchData.startTime = setDate(val[0])
        this.searchData.endTime = setDate(val[1])
      },
      dateChange (val, type) {
        if (type === 'A') {
          this.searchData.compareDateA = setDate(val)
        } else {
          this.searchData.compareDateB = setDate(val)
        }
      },
      reload () {
        window.location.reload()
      },
      topCalendarsChange () {
        this.setCityCode(this.searchData.cityCode)
        this.getTopTotal({url: api.paymentData.total, params: {cityCode: this.searchData.cityCode, dateType: this.searchData.calendarsTop}})
        this.initChartTableData()
      },
      handleCurrentChange (val) {
        let that = this
        that.setPage({pageNum: val, pageSize: 10, total: that.tableDataTotal.length})
        let tableData = []
        let arrlen = val * that.page.pageSize <= that.tableDataTotal.length ? that.page.pageSize : that.tableDataTotal.length - that.page.pageSize * (val - 1)
        for (let i = 0; i < arrlen; i++) {
          let temp = i + that.page.pageSize * (val - 1)
          tableData.push(that.tableDataTotal[temp])
        }
        that.setTableData(tableData)
      },
      changeItem (appKey) {
        this.searchData.appKey = appKey
      },
      getLineType (url, param) { // 获取appkey类型
        return new Promise((resolve, reject) => {
          ajax.get(url, param).then((res) => {
            resolve(res)
          }).catch(err => {
            reject(err)
          })
        })
      },
      initChartTableData () {
        let that = this
        that.getLineType(api.lineType, {cityCode: that.searchData.cityCode}).then((res) => {
          that.lineTypeOptions = res
          that.searchData.appKey = that.lineTypeOptions[0].app_key
          if (this.searchData.searchType === '0') {
            that.getCardData()
          } else {
            that.getCompareResult()
          }
        })
      },
      getCardData () {
        let that = this
        that.paymentBarLoading = true
        ajax.get(api.paymentData.result, that.searchData).then((res) => {
          let code = res.msg.code
          if (code === '20000') {
            let data = res.data.list
            let headerData = res.data.tableHeaders
            if (that.searchData.startTime === '' && (that.searchData.calendars === '1' || that.searchData.calendars === '0')) {
              that.setTable(headerData)
            } else if (that.searchData.startTime === '' && that.searchData.calendars === '2') {
              that.setPayWeekTable(headerData)
            } else if (that.searchData.startTime === '' && that.searchData.calendars === '3') {
              that.setPayMonthTable(headerData)
            } else {
              that.setPayCustomTable(headerData)
            }
            that.setTableDataTotal(data)
            that.handleCurrentChange(1)
            let {legendData, xAxisData, seriesData} = handleChartData(headerData, data)
            cardData(true, legendData, xAxisData, seriesData, 'paymentBar')
          } else {
            this.$message({type: 'error', message: res.msg.message})
          }
          that.paymentBarLoading = false
        }).catch((err) => {
          if (err) throw err
          that.paymentBarLoading = false
        })
      },
      getCompareResult () {
        if (this.searchData.compareDateA === '' || this.searchData.compareDateB === '') {
          this.$message({type: 'info', message: '请选择对比日期'})
          return
        }
        let that = this
        that.paymentBarLoading = true
        ajax.get(api.paymentData.compare, that.searchData).then((res) => {
          let code = res.msg.code
          if (code === '20000') {
            let data = res.data.list
            let headerData = res.data.tableHeaders
            that.setTableDataTotal(data)
            that.setPayCompareTable(headerData)
            that.handleCurrentChange(1)
            let {legendData, xAxisData, seriesData} = handleChartDataCompare(headerData, data)
            cardData(false, legendData, xAxisData, seriesData, 'paymentCompareBar')
          } else {
            this.$message({type: 'error', message: res.msg.message})
          }
          that.paymentBarLoading = false
        }).catch((err) => {
          if (err) throw err
          that.paymentBarLoading = false
        })
      },
      exportExcelHandler () { // 导出excel
        let url = this.searchData.searchType === '0' ? api.paymentData.export : api.paymentData.compareExport
        let params = this.searchData
        this.$exportExcel(url, params)
      },
      selectDateTab (e) {
        let num = e.target.getAttribute('data-index')
        this.currentNum = parseInt(num)
        this.getTopTotal({url: api.paymentData.total, params: {cityCode: this.searchData.cityCode, dateType: this.currentNum}})
      }
    }
  }
</script>
